<template>
  <div class="container">
    <!-- tool start -->
    <el-form
      :model="formInline"
      label-width="120px"
      @keyup.enter.native="search"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="SKU">
            <el-input
              maxlength="50"
              show-word-limit
              v-model="formInline.productSpecCode"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.productname')">
            <el-input
              maxlength="200"
              show-word-limit
              v-model="formInline.productName"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-button
            type="primary"
            @click="search"
            v-if="hasPermission('search')"
            >{{ $t("m.query") }}</el-button
          >
          <!-- 暂时屏蔽这个按钮 -->
          <!-- <el-button
            v-if="hasPermission('settingWarning')"
            type="danger"
            @click="handleEvent"
          >{{$t('m.stock.warning')}}</el-button>-->
          <el-button @click="printSku" v-if="hasPermission('print')">{{
            $t("m.print")
          }}</el-button>
          <el-button type="primary" @click="exportMethod">{{
            $t("m.export")
          }}</el-button>
          <el-button type="success" @click="exportExcel">{{$t('m.export')}}{{$t('m.stock.nopicture')}}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- tool end -->

    <!-- table数据展示 start -->
    <el-table
      ref="table"
      class="table-wrap"
      stripe
      empty-text
      fit
      v-loading="tableLoading"
      :data="tableData"
      :row-style="tableRowStyle"
      :row-class-name="tableRowClassName"
      @row-click="rowClick"
      @selection-change="handleMultiSelectionChange"
    >
      <el-table-column
        align="center"
        type="selection"
        width="55"
      ></el-table-column>
      <el-table-column
        align="center"
        type="index"
        :label="$t('m.index')"
        width="50"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="warehousename"
        :label="$t('m.page.warehouse')"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="productspeccode"
        label="SKU"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="productname"
        :label="$t('m.in.productname')"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        align="center"
        prop="productspec"
        :label="$t('m.in.productspec')"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column align="center" :label="$t('m.stock.productstock')">
        <template slot-scope="scope">
          <template v-if="hasPermission('table-stock')">
            <el-button
              type="text"
              @click.stop="getStockHistoryDetail(scope.row)"
              >{{ scope.row.storage }}</el-button
            >
          </template>
          <template v-else>{{ scope.row.storage }}</template>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="unavailablestock"
        :label="$t('m.stock.unavailablestock')"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="occupystock"
        :label="$t('m.stock.occupystock')"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="virtualstock"
        :label="$t('m.stock.virtualstock')"
      ></el-table-column>
      <el-table-column align="center" :label="$t('m.stock.transitstock')">
        <template slot-scope="scope">
          <template v-if="hasPermission('table-transitionStock')">
            <el-button type="text" @click.stop="getTransitstockDetail(scope)">{{
              scope.row.transitstock
            }}</el-button>
          </template>
          <template v-else>{{ scope.row.transitstock }}</template>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('m.stock.stockout')">
        <template slot-scope="scope">
          <template v-if="hasPermission('table-stockOut')">
            <el-button type="text" @click.stop="getStockoutDetail(scope)">{{
              scope.row.stockout
            }}</el-button>
          </template>
          <template v-else>{{ scope.row.stockout }}</template>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('m.stock.placeholderstock')">
        <template slot-scope="scope">
          <template v-if="hasPermission('table-placeholderStock')">
            <el-button
              type="text"
              @click.stop="getPlaceholderstockDetail(scope)"
              >{{ scope.row.placeholderstock }}</el-button
            >
          </template>
          <template v-else>{{ scope.row.placeholderstock }}</template>
        </template>
      </el-table-column>
      <!-- 暂时屏蔽这两列 -->
      <!-- <el-table-column align="center" prop="storageupper" :label="$t('m.stock.storageupper')"></el-table-column>
      <el-table-column align="center" prop="storagelower" :label="$t('m.stock.storagelower')"></el-table-column>-->
      <el-table-column
        align="center"
        prop="averagecostprice"
        :label="$t('m.stock.averagecostprice')"
      ></el-table-column>
    </el-table>

    <el-pagination
      background
      layout="sizes, prev, pager, next, jumper"
      :page-sizes="pageSizeList"
      :page-size="rowSize"
      :current-page="page"
      :total="totalRows"
      @current-change="currentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
    <!-- table数据展示 end -->

    <!-- 设置预警库存 start -->
    <settingWarningPopup
      v-if="settingWarningPopupVisible"
      :popupVisible="settingWarningPopupVisible"
      @save="setStockWarning"
      @close="settingWarningPopupVisible = false"
    ></settingWarningPopup>
    <!-- 设置预警库存 end -->

    <!-- 库存dialog start -->
    <stockHistoryPopup
      v-if="stockHistoryPopupVisible"
      :popupVisible="stockHistoryPopupVisible"
      :row="stockHistoryPopupData"
      @close="stockHistoryPopupVisible = false"
    ></stockHistoryPopup>
    <!-- 库存dialog end -->

    <!-- 在途库存,缺货库存,占位库存dialog start -->
    <stockInfoPopup
      v-if="stockInfoPopupVisible"
      :popupVisible="stockInfoPopupVisible"
      :detail="stockInfoPopupData"
      @close="stockInfoPopupVisible = false"
    ></stockInfoPopup>
    <!-- 在途库存,缺货库存,占位库存dialog end -->
  </div>
</template>
<script>
import common from '@/utils/common'
export default {
  name:'productInventory',
  data(){
    return {
      formInline:{
        warehouseId:'', // 仓库
        productSpecCode:'', // sku
        productName:'' // 产品名称
      },
      partitionOptions:[], // 库区名及id

      tableData:[],

      settingWarningPopupVisible:false, // 控制设置预警库存dialog显示隐藏
      stockHistoryPopupVisible:false, // 控制库存dialog显示隐藏
      stockInfoPopupVisible:false, // 在途库存,缺货库存,占位库存dialog显示隐藏

      stockHistoryPopupData:{},
      stockInfoPopupData:{}
    }
  },
  mounted(){
    this.getData()
  },
  components:{
    settingWarningPopup:() => import('@/components/stock/setting-warning-popup'), // 设置预警库存
    stockHistoryPopup:() => import('@/components/stock/stock-history-popup'), // 库存dialog,
    stockInfoPopup:() => import('@/components/stock/stock-info-popup') // 在途库存,缺货库存,占位库存dialog
  },
  activated(){
    this.getData()
  },
  methods:{
    exportMethod(){
      common.exportMethod(`/excel/export/productstock`)
    },
    exportExcel(){
      common.exportMethod(`/productstock/nopicsku/export`)
    },
    search(){
      this.page = 1
      this.getData()
    },
    // 设置预警库存
    handleEvent(){
      this.settingWarningPopupVisible = true
    },
    setStockWarning(){
      this.settingWarningPopupVisible = false
    },
    printSku(){
      let that = this
      let arr = []
      if (!that.tableRowSelected.length){
        that.$message(that.$t('m.chooseprint') + 'SKU')
      } else {
        that.tableRowSelected.forEach(v => {
          arr.push({
            fullspecvlue:v.productspec,
            number:v.storage,
            sku:v.productspeccode
          })
        })
        that
          .$axios({
            method:'post',
            url:'/printtemplate/printsku',
            data:arr
          })
          .then(({ data }) => {
            that.printContent = data
            that.printContent +=
              'LODOP.SET_PRINT_PAGESIZE(1, "50mm", "30mm", "");LODOP.PREVIEW();'
            eval(that.printContent)
          })
      }
    },
    getData(){
      let warehouseId = this.$store.state.basicInfo.warehouseInfo.id
      let data = Object.assign({}, this.formInline, { pageIndex:this.page, pageSize:this.rowSize, warehouseId })

      let options = {
        withCredentials:false,
        method:'post',
        url:`${window._config_.stockUrl}/api/ProductStock/GetProductStockList`,
        data
      }
      this.tableLoading = true
      this.$axios(options).then(({ data, count }) => {
        this.tableData = data
        this.totalRows = count
        setTimeout(() => this.tableLoading = false, 500)
        if (!this.tableData.length)
          return this.callbackMessage(this.$t('m.nodata'))
      })
    },
    // 库存
    getStockHistoryDetail(row){
      this.stockHistoryPopupData = row
      this.stockHistoryPopupVisible = true
    },
    instanceOfAxios(argument){
      let data = argument.data
      let options = {
        withCredentials:false,
        method:'post',
        url:`${window._config_.stockUrl}/api/ProductStock/${argument.api}`,
        data
      }
      this.$axios(options).then(({ data }) => {
        this.stockInfoPopupData = {
          title:argument.title,
          thead:argument.thead,
          data
        }
        this.stockInfoPopupVisible = true
      })
    },
    // 在途库存
    getTransitstockDetail(scope){
      let params = {
        // 懒得下qs包来转了。
        data:`warehouseName=${scope.row.warehousename}&sku=${scope.row.productspeccode}`,
        api:'GetTransitStockDetails',
        title:scope.column.label,
        thead:[
          { name:this.$t('m.type'), prop:'classname' },
          {
            name:this.$t('m.page.warehouse') + this.$t('m.name'),
            prop:'warehousename'
          },
          { name:this.$t('m.stock.code'), prop:'ordercode' },
          {
            name:this.$t('m.page.product') + this.$t('m.code'),
            prop:'productspeccode'
          },
          { name:this.$t('m.stock.quantity'), prop:'quantity' }
        ]
      }
      this.instanceOfAxios(params)
    },
    // 缺货库存
    getStockoutDetail(scope){
      let params = {
        // 懒得下qs包来转了。
        data:`warehouseName=${scope.row.warehousename}&sku=${scope.row.productspeccode}`,
        api:'GetStockoutsDetails',
        title:scope.column.label,
        thead:[
          { name:this.$t('m.stock.stocktype'), prop:'classname' },
          { name:this.$t('m.in.ordernumber'), prop:'ordercode' },
          { name:this.$t('m.stock.orderqty'), prop:'quantity' },
          { name:this.$t('m.stock.stockqty'), prop:'stockout' },
          {
            name:this.$t('m.page.product') + this.$t('m.code'),
            prop:'productspeccode'
          }
        ]
      }
      this.instanceOfAxios(params)
    },
    // 占位库存
    getPlaceholderstockDetail(scope){
      let params = {
        // 懒得下qs包来转了。
        data:`warehouseId=${scope.row.warehouseid}&sku=${scope.row.productspeccode}`,
        api:'GetPlaceholderDetails',
        title:scope.column.label,
        thead:[
          { name:this.$t('m.type'), prop:'classname' },
          { name:this.$t('m.stock.code'), prop:'code' },
          {
            name:this.$t('m.page.location') + this.$t('m.code'),
            prop:'locationcode'
          },
          {
            name:this.$t('m.stock.placeholderstock'),
            prop:'placeholderstock'
          },
          { name:this.$t('m.stock.placedate'), prop:'createdate' }
        ]
      }
      this.instanceOfAxios(params)
    }
  },
  beforeRouteLeave(to, form, next){
    this.settingWarningPopupVisible = false
    this.stockHistoryPopupVisible = false
    this.stockInfoPopupVisible = false
    next()
  }
}
</script>
<style lang="scss" scoped>
.container ::v-deep .el-select {
  width: 100%;
}
</style>